<script setup>
import FirstTitle from "@comp/FirstTitle";
import { postTableData } from "@/api/table";
import { searchDataPzzh } from "@/api/search";
import { addOrUpdatePzzh } from "@/api/addOrUpdate";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
const city = window.globalObj.name;

const editorRef10 = shallowRef();
const valueHtml10 = ref(
  "本级共有人防专业队力量XX类、XX个专业队,共XX人，具体情况如下："
);
const toolbarConfig10 = {};
const editorConfig10 = { placeholder: "请输入内容..." };
const mode10 = ref("default");
const handleCreated10 = (editor) => {
  editorRef10.value = editor; // 记录 editor 实例，重要！
};
const editorRef11 = shallowRef();
const valueHtml11 = ref(
  `按照供水抢修队建设比例XX‰、电力抢修队建设比例XX‰、煤气抢修队建设比例XX‰、供热抢修队建设比例XX‰、道桥抢修队建设比例XX‰、建筑抢修队建设比例XX‰、消防救援专业队建设比例XX‰、医疗救护专业队建设比例XX‰、防化防疫专业队建设比例XX‰、治安专业队建设比例XX‰、交通运输专业队建设比例XX‰、通信专业队建设比例XX‰、信息防护专业队建设比例XX‰、心理防护专业队建设比例XX‰、伪装防护专业队建设比例XX‰、核化检测洗消专业队建设比例XX‰的标准，需要建设专业队XX类、XX人。具体情况如下：`
);
const toolbarConfig11 = {};
const editorConfig11 = { placeholder: "请输入内容..." };
const mode11 = ref("default");
const handleCreated11 = (editor) => {
  editorRef11.value = editor; // 记录 editor 实例，重要！
};

// 队伍体系表格
const headerCellStyleDwtx = ({ row, column, rowIndex, columnIndex }) => {
  nextTick(() => {
    if (columnIndex > 0) {
      const propNum = Number(column.property.includes("PNum"));
      const dom = document.querySelector(`.${column.id}`);
      if (propNum % 2 === 0) {
        // 合并的
        dom.setAttribute("colspan", 2);
        dom.innerHTML = column.label;
      } else {
        // 被合并的
        dom.setAttribute("colspan", 0);
        dom.style.display = "none";
      }
    }
  });

  return {
    height: "40px",
  };
};
const cellStyleDwtx = () => {
  return {
    height: "38px",
    padding: "4px 0",
    fontSize: "14px",
  };
};
const getSummariesDwtx = ({ columns, data }) => {
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = h("div", {}, ["合计"]);
      return;
    }
    sums[index] = "X";
  });
  return sums;
};

// 表头单元格样式
const headerCellStyle = () => {
  return {
    backgroundColor: "#f5f7fa",
    color: "rgba(0,0,0,0.85)",
    fontSize: "14px",
    height: "54px",
  };
};
// 单元格样式
const cellStyle = () => {
  return {
    color: "rgba(0,0,0,0.65)",
    fontSize: "14px",
    lineHeight: "22px",
  };
};

// 合计占2单元格
const spanMethod = ({ row, column, rowIndex, columnIndex, length }) => {
  if (columnIndex === 0) {
    if (rowIndex === length - 1 && row.jd_name === "合计") {
      return {
        display: "none",
      };
    }
  } else if (columnIndex === 1) {
    if (row.jd_name === "合计") return [1, 2];
  }
};

// 专业力量能力现状统计表
const nlxzList = ref([]);
const getNlxzData = () => {
  return postTableData({
    docType: "spaceToWar",
    method: "zhuanyeliliangxianzhuang",
  }).then((res) => {
    if (res.code === 200) {
      nlxzList.value =
        [
          {
            jd_name: "行政区域",
            gongshuiNum: "队数",
            gongshuiPNum: "人数",
            dianliNum: "队数",
            dianliPNum: "人数",
            ranqiNum: "队数",
            ranqiPNum: "人数",
            gongreNum: "队数",
            gongrePNum: "人数",
            daoqiaoNum: "队数",
            daoqiaoPNum: "人数",
            gongchengNum: "队数",
            gongchengPNum: "人数",
            xiaofangNum: "队数",
            xiaofangPNum: "人数",
            yiliaoNum: "队数",
            yiliaoPNum: "人数",
            fangyiNum: "队数",
            fangyiPNum: "人数",
            zhianNum: "队数",
            zhianPNum: "人数",
            jiaotongNum: "队数",
            jiaotongPNum: "人数",
            tongxinNum: "队数",
            tongxinPNum: "人数",
            xinxiNum: "队数",
            xinxiPNum: "人数",
            xinliNum: "队数",
            xinliPNum: "人数",
            weizhuangNum: "队数",
            weizhuangPNum: "人数",
            hehuaNum: "队数",
            hehuaPNum: "人数",
          },
          ...res?.data,
        ] || [];
    }
  });
};
// 专业力量建设需求参照表
const jsxqList = ref([]);
const getJsxqData = () => {
  return postTableData({
    docType: "spaceToWar",
    method: "zhuanyeliliangxuqiu",
  }).then((res) => {
    if (res.code === 200) {
      jsxqList.value = res?.data || [];
    }
  });
};
// 加载html
const initHtml = () => {
  searchDataPzzh({ m: "任务需求专业力量能力现状及需求分析" }).then((res) => {
    const { data } = res;
    valueHtml10.value = data.find((x) => x.k === "专业力量能力现状")?.v || "";
    valueHtml11.value = data.find((x) => x.k === "专业力量需求分析")?.v || "";
  });
};
const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdatePzzh({
      m: "任务需求专业力量能力现状及需求分析",
      data: [
        {
          k: "专业力量能力现状",
          v: valueHtml10.value,
        },
        {
          k: "专业力量需求分析",
          v: valueHtml11.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(async () => {
  initHtml();
  await getNlxzData();
  // await getJsxqData();
});
onBeforeUnmount(() => {
  if (editorRef10.value) editorRef10.value.destroy();
  if (editorRef11.value) editorRef11.value.destroy();
});
</script>
<template>
  <div>
    <FirstTitle name="能力现状" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef10"
        :defaultConfig="toolbarConfig10"
        :mode="mode10"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml10"
        :defaultConfig="editorConfig10"
        :mode="mode10"
        @onCreated="handleCreated10"
      />
    </div>
    <div class="top-15 zddj text-center">{{ city }}专业力量能力现状统计表</div>
    <el-table
      :header-cell-style="headerCellStyleDwtx"
      :cell-style="cellStyleDwtx"
      class="top-15"
      id="tableDwtx"
      :data="nlxzList"
      max-height="500px"
      border
    >
      <el-table-column
        min-width="100"
        prop="jd_name"
        label="行政区域"
        align="center"
      />
      <el-table-column prop="gongshuiNum" label="供水抢险抢修" align="center" />
      <el-table-column
        prop="gongshuiPNum"
        label="供水抢险抢修1"
        align="center"
      />
      <el-table-column prop="dianliNum" label="电力抢险抢修" align="center" />
      <el-table-column prop="dianliPNum" label="电力抢险抢修1" align="center" />
      <el-table-column prop="ranqiNum" label="燃气抢险抢修" align="center" />
      <el-table-column prop="ranqiPNum" label="燃气抢险抢修1" align="center" />
      <el-table-column prop="gongreNum" label="供热抢险抢修" align="center" />
      <el-table-column prop="gongrePNum" label="供热抢险抢修1" align="center" />
      <el-table-column prop="daoqiaoNum" label="道桥抢险抢修" align="center" />
      <el-table-column
        prop="daoqiaoPNum"
        label="道桥抢险抢修1"
        align="center"
      />
      <el-table-column
        prop="gongchengNum"
        label="工程抢险抢修专业队"
        align="center"
      />
      <el-table-column
        prop="gongchengPNum"
        label="工程抢险抢修专业队1"
        align="center"
      />
      <el-table-column prop="xiaofangNum" label="消防救援" align="center" />
      <el-table-column prop="xiaofangPNum" label="消防救援1" align="center" />
      <el-table-column prop="yiliaoNum" label="医疗救护" align="center" />
      <el-table-column prop="yiliaoPNum" label="医疗救护1" align="center" />
      <el-table-column prop="fangyiNum" label="防化防疫" align="center" />
      <el-table-column prop="fangyiPNum" label="防化防疫1" align="center" />
      <el-table-column prop="zhianNum" label="治安" align="center" />
      <el-table-column prop="zhianPNum" label="治安1" align="center" />
      <el-table-column prop="jiaotongNum" label="交通运输" align="center" />
      <el-table-column prop="jiaotongPNum" label="交通运输1" align="center" />
      <el-table-column prop="tongxinNum" label="通信" align="center" />
      <el-table-column prop="tongxinPNum" label="通信1" align="center" />
      <el-table-column prop="xinxiNum" label="信息防护" align="center" />
      <el-table-column prop="xinxiPNum" label="信息防护1" align="center" />
      <el-table-column prop="xinliNum" label="心理防护" align="center" />
      <el-table-column prop="xinliPNum" label="心理防护1" align="center" />
      <el-table-column
        prop="weizhuangNum"
        label="伪装防护专业队"
        align="center"
      />
      <el-table-column
        prop="weizhuangPNum"
        label="伪装防护专业队1"
        align="center"
      />
      <el-table-column prop="hehuaNum" label="核化检测洗消" align="center" />
      <el-table-column prop="hehuaPNum" label="核化检测洗消1" align="center" />
    </el-table>

    <FirstTitle name="需求分析" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef11"
        :defaultConfig="toolbarConfig11"
        :mode="mode11"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml11"
        :defaultConfig="editorConfig11"
        :mode="mode11"
        @onCreated="handleCreated11"
      />
    </div>
    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>